<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <link rel="icon" href="./images/Logo.jpg" type="image/x-icon">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>寻香 - 茶文化体验平台</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
  <style>
    /* 全局样式 */
    * { box-sizing: border-box; margin: 0; padding: 0; }
    body { font-family: Arial, "微软雅黑", sans-serif; background: #F8F1E4; color: #333; line-height: 1.6; }

    /* 头部 */
    header {
      background: #2E7D32; padding: 15px 20px;
      display: flex; justify-content: space-between; align-items: center;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1); position: sticky; top: 0; z-index: 100;
    }
    .logo { font-size: 1.8rem; font-weight: bold; color: #fff; }
    nav ul { list-style: none; display: flex; }
    nav ul li { margin: 0 15px; }
    nav ul li a {
      text-decoration: none; color: #fff; font-size: 1rem; transition: color 0.3s ease;
    }
    nav ul li a:hover { color: #C8E6C9; }

    .search-login { display: flex; align-items: center; }
    .search-box {
      padding: 5px 10px; border: 1px solid #ddd; border-radius: 3px; margin-right: 10px;
    }
    .login-btn {
      padding: 6px 12px; background: #4CAF50; color: #fff; border: none; border-radius: 3px; cursor: pointer;
      transition: background 0.3s ease;
    }
    .login-btn:hover { background: #388E3C; }

    /* 轮播图 */
    .carousel {
      position: relative; width: 100%; max-width: 1200px; height: 50vh;
      margin: 20px auto; overflow: hidden; border-radius: 8px;
      box-shadow: 0 3px 10px rgba(0,0,0,0.1); background: #E8F5E9;
    }
    .carousel img {
      width: 100%; height: 100%; object-fit: cover; display: none;
    }
    .carousel img.active { display: block; }
    .prev, .next {
      position: absolute; top: 50%; transform: translateY(-50%);
      background: rgba(0,0,0,0.5); color: white; padding: 10px 15px;
      border: none; cursor: pointer; font-size: 1.5rem; border-radius: 50%;
    }
    .prev { left: 10px; }
    .next { right: 10px; }

    /* 功能区块 */
    .features {
      display: flex; justify-content: space-around; padding: 20px;
      background: #E8F5E9; margin: 20px auto; max-width: 1200px;
      border-radius: 8px; box-shadow: 0 3px 10px rgba(0,0,0,0.05);
    }
    .feature {
      flex: 1 1 200px; margin: 10px; padding: 20px;
      background: #C8E6C9; border-radius: 5px; text-align: center;
    }
    .feature h2 a { text-decoration: none; color: #2E7D32; font-weight: bold; }

    /* 茶区地图 */
    .tea-map {
      padding: 20px; background: #fff; margin: 20px auto; max-width: 800px;
      text-align: center; border-radius: 8px; box-shadow: 0 3px 10px rgba(0,0,0,0.05);
      position: relative;
    }
    .tea-map img { width: 100%; border-radius: 8px; }
    .map-link {
      position: absolute; background: rgba(0, 0, 0, 0.7); padding: 6px 10px;
      border-radius: 6px; color: white; font-weight: bold; text-decoration: none;
      transition: background 0.3s ease; font-size: 0.9rem;
    }
    .map-link:hover { background: rgba(61, 90, 69, 0.8); }

    /* 用户评价 */
    .reviews {
      background: #E8F5E9;
      padding: 30px 20px;
      margin: 20px auto;
      max-width: 800px;
      border-radius: 8px;
      box-shadow: 0 3px 10px rgba(0,0,0,0.05);
    }
    .review-form {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    .form-group {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .rating-stars {
      display: flex;
      gap: 10px;
      margin: 5px 0;
    }
    .rating-stars input[type="radio"] {
      display: none;
    }
    .rating-stars label {
      font-size: 24px;
      color: #ccc;
      cursor: pointer;
      transition: color 0.2s;
    }
    .rating-stars label:hover,
    .rating-stars input[type="radio"]:checked ~ label {
      color: #ffd700;
    }
    textarea {
      width: 100%;
      padding: 12px;
      border: 1px solid #ddd;
      border-radius: 6px;
      resize: vertical;
      min-height: 100px;
      font-family: Arial, "微软雅黑", sans-serif;
    }
    .submit-btn {
      align-self: flex-start;
      padding: 12px 30px;
      background: #4CAF50;
      color: white;
      border: none;
      border-radius: 25px;
      cursor: pointer;
      transition: background 0.3s;
      font-size: 16px;
    }
    .submit-btn:hover {
      background: #388E3C;
    }

    /* 分割线 */
    .divider {
      width: 80%; height: 2px; background: #4CAF50; margin: 40px auto;
      border-radius: 2px;
    }

    /* 底部 */
    footer {
      background: #2d4538; color: #fff;
      text-align: center; padding: 20px;
    }

    /* 下拉菜单样式 */
    .dropdown {
      position: relative;
    }

    .dropdown-menu {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      background: #C8E6C9;
      border-radius: 5px;
      box-shadow: 0 3px 10px rgba(0,0,0,0.1);
      list-style: none;
      padding: 10px 0;
      min-width: 150px;
      z-index: 1000;
    }

    .dropdown-menu li {
      margin: 0;
    }

    .dropdown-menu li a {
      padding: 8px 15px;
      color: #2E7D32;
      text-decoration: none;
      display: block;
      transition: background 0.3s ease;
    }

    .dropdown-menu li a:hover {
      background: #A5D6A7;
    }

    /* 鼠标悬停时显示下拉菜单 */
    .dropdown:hover .dropdown-menu {
      display: block;
    }

    /* 页面特定样式 */
    .banner {
      width: 100%;
      height: 400px;
      overflow: hidden;
      position: relative;
    }

    .banner img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .banner-nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 100%;
      display: flex;
      justify-content: space-between;
      padding: 0 20px;
    }

    .banner-nav button {
      background: rgba(0, 0, 0, 0.5);
      color: white;
      border: none;
      padding: 10px;
      border-radius: 50%;
      cursor: pointer;
      width: 40px;
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .feature-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 20px;
      padding: 40px 20px;
      max-width: 1200px;
      margin: 0 auto;
      background: var(--light-bg);
    }

    .feature-item {
      background: white;
      padding: 20px;
      border-radius: 10px;
      text-align: center;
      box-shadow: 0 2px 10px rgba(0,0,0,0.1);
      transition: transform 0.3s;
    }

    .feature-item:hover {
      transform: translateY(-5px);
    }

    .feature-item h3 {
      color: var(--primary-color);
      margin-bottom: 10px;
    }

    .feature-item p {
      color: var(--text-color);
      line-height: 1.5;
    }

    /* AI助手基本样式 */
    #aiAssistant {
      position: fixed;
      bottom: 20px;
      left: 20px;
      z-index: 10000;
    }
    #aiToggle {
      width: 70px;
      height: 70px;
      background-color: #2d5a27;
      border: 4px solid #fff;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      box-shadow: 0 5px 15px rgba(0,0,0,0.4);
    }
    #aiToggle i {
      color: white;
      font-size: 32px;
    }
    #aiChatWindow {
      position: fixed;
      bottom: 100px;
      left: 20px;
      width: 320px;
      background: white;
      border-radius: 10px;
      box-shadow: 0 5px 20px rgba(0,0,0,0.3);
      border: 2px solid #2d5a27;
      display: none;
    }
    .chat-header {
      padding: 15px;
      background: #2d5a27;
      color: white;
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-weight: bold;
      border-radius: 8px 8px 0 0;
    }
    .chat-close {
      font-size: 24px;
      cursor: pointer;
      line-height: 20px;
    }
    .chat-messages {
      padding: 15px;
      height: 250px;
      overflow-y: auto;
      background: white;
    }
    .message {
      padding: 10px 15px;
      border-radius: 18px;
      margin-bottom: 10px;
      max-width: 85%;
      line-height: 1.4;
    }
    .message.bot {
      background: #f0f0f0;
      float: left;
      clear: both;
      border-bottom-left-radius: 5px;
    }
    .message.bot.error {
      background: #ffe6e6;
      color: #cc0000;
      border: 1px solid #ffcccc;
    }
    .fa-spinner {
        margin-right: 8px;
    }
    .message.user {
      background: #e8f5e8;
      float: right;
      clear: both;
      border-bottom-right-radius: 5px;
      color: #000000;
      font-weight: 500;
    }
    .chat-input {
      display: flex;
      padding: 10px;
      border-top: 1px solid #eee;
      background: white;
      border-radius: 0 0 8px 8px;
    }
    .chat-input input {
      flex: 1;
      padding: 10px 15px;
      border: 1px solid #ddd;
      border-radius: 20px;
      outline: none;
      font-size: 14px;
    }
    .chat-input button {
      padding: 10px 15px;
      margin-left: 5px;
      background: #2d5a27;
      color: white;
      border: none;
      border-radius: 20px;
      cursor: pointer;
      font-weight: bold;
    }
  </style>
</head>
<body>
  <header>
    <div class="logo">寻香</div>
    <nav>
      <ul>
        <li><a href="#tea-map">茶区介绍</a></li>
        <li><a href="booking.html" target="_blank">线上预定</a></li>
        <li class="dropdown">
          <a href="FeaturesServices.html" target="_blank">特色服务</a>
          <ul class="dropdown-menu">
            <li><a href="./FeaturesServices.html" target="_blank">个性化定制</a></li>
            <li><a href="./treefound.html" target="_blank">茶树领养</a></li>
          </ul>
        </li>
        <li><a href="#reviews">用户评价</a></li>
      </ul>
    </nav>
    <div class="search-login">
      <input type="text" class="search-box" placeholder="搜索...">
      <button class="login-btn" id="headerLoginBtn">登录/注册</button>
      <button class="login-btn" id="headerLogoutBtn" style="display: none; background: #e74c3c;">退出登录</button>
    </div>
  </header>

  <!-- 轮播图 -->
  <section class="carousel">
    <button class="prev" onclick="prevSlide()">&#10094;</button>
    <img src="./images/西南背景.jpg" class="active" alt="轮播图1">
    <img src="./images/image2.jpg" alt="轮播图2">
    <img src="./images/image3.jpg" alt="轮播图3">
    <button class="next" onclick="nextSlide()">&#10095;</button>
  </section>

  <!-- 功能区块 -->
  <section class="features">
    <div class="feature">
      <h2><a href="#tea-map">茶区介绍</a></h2>
      <p>了解各大茶区的独特魅力和历史传承。</p>
    </div>
    <div class="feature">
      <h2><a href="booking.html" target="_blank">线上预定</a></h2>
      <p>轻松在线预定，体验正宗茶文化之旅。</p>
    </div>
    <div class="feature">
      <h2><a href="FeaturesServices.html" target="_blank">特色服务</a></h2>
      <p>体验茶艺表演、茶道研习班等多种服务。</p>
    </div>
    <div class="feature">
      <h2><a href="#reviews">用户评价</a></h2>
      <p>看看其他用户对我们服务的真实反馈。</p>
    </div>
  </section>

  <!-- AI助手（完全重写版本） -->
  <div id="aiAssistant">
    <div id="aiToggle">
      <i class="fas fa-robot"></i>
    </div>
    <div id="aiChatWindow">
      <div class="chat-header">
        <h3>茶艺智能助手</h3>
        <span class="chat-close">&times;</span>
      </div>
      <div id="chatMessages" class="chat-messages">
        <div class="message bot">
          您好！我是您的茶艺助手，有什么可以帮您的吗？
        </div>
      </div>
      <div class="chat-input">
        <input type="text" id="chatInput" placeholder="请输入您的问题...">
        <button type="button" id="sendBtn">发送</button>
      </div>
    </div>
  </div>

  <!-- 茶区地图 -->
  <section id="tea-map" class="tea-map">
    <h2>中国四大茶区</h2>
    <div class="map-container">
      <img src="./images/四大茶区.jpg" alt="中国茶区地图">
      <a href="xinan.html" target="_blank" class="map-link" style="top: 65%; left: 21%">西南茶区</a>
      <a href="jiangnan.html" target="_blank" class="map-link" style="top: 75%; left: 21%">江南茶区</a>
      <a href="huanan.html" target="_blank" class="map-link" style="top: 80%; left: 21%">华南茶区</a>
      <a href="jiangbei.html" target="_blank" class="map-link" style="top: 70%; left: 21%">江北茶区</a>
    </div>
  </section>

  <div class="divider"></div>

  <!-- 用户评价 -->
  <section id="reviews" class="reviews">
    <h2>用户评价</h2>
    <form class="review-form">
      <div class="form-group">
        <label>您的评分：</label>
        <div class="rating-stars">
          <input type="radio" id="star5" name="rating" value="5" required>
          <label for="star5">★</label>
          <input type="radio" id="star4" name="rating" value="4">
          <label for="star4">★</label>
          <input type="radio" id="star3" name="rating" value="3">
          <label for="star3">★</label>
          <input type="radio" id="star2" name="rating" value="2">
          <label for="star2">★</label>
          <input type="radio" id="star1" name="rating" value="1">
          <label for="star1">★</label>
        </div>
      </div>

      <div class="form-group">
        <label for="experience">旅行体验分享：</label>
        <textarea 
          id="experience" 
          name="experience"
          placeholder="请分享您的茶文化旅行体验..."
          required
        ></textarea>
      </div>

      <div class="form-group">
        <label for="suggestions">改进建议：</label>
        <textarea 
          id="suggestions" 
          name="suggestions"
          placeholder="您对我们的服务有什么改进建议吗？"
        ></textarea>
      </div>

      <button type="submit" class="submit-btn">提交评价</button>
    </form>
  </section>

  <!-- 底部信息 -->
  <footer>
    <p>© 2025 寻香. 版权所有.</p>
    <p>联系方式: example@example.com</p>
  </footer>

  <script>
    // 恢复原有轮播图功能
    let currentIndex = 0;
    const images = document.querySelectorAll(".carousel img");
    const totalImages = images.length;

    function showSlide(index) {
      images.forEach(img => img.classList.remove("active"));
      images[index].classList.add("active");
    }

    function nextSlide() {
      currentIndex = (currentIndex + 1) % totalImages;
      showSlide(currentIndex);
    }

    function prevSlide() {
      currentIndex = (currentIndex - 1 + totalImages) % totalImages;
      showSlide(currentIndex);
    }

    setInterval(nextSlide, 3000);

    // 确保登录按钮功能
    document.querySelector('#headerLoginBtn').addEventListener('click', function() {
      window.location.href = 'user-auth.html';
    });

    document.querySelector('#headerLogoutBtn').addEventListener('click', function() {
      localStorage.removeItem('currentUser');
      alert('您已成功退出登录');
      window.location.reload();
    });

    // 表单提交处理
    document.querySelector('.review-form').addEventListener('submit', function(e) {
      e.preventDefault();
      alert('感谢您的评价！我们会认真考虑您的建议。');
      this.reset();
    });

    // 阻止点击"特色服务"链接时隐藏下拉菜单
    document.querySelector('.dropdown > a').addEventListener('click', function(e) {
      e.stopPropagation();
    });

    // AI助手功能
    document.addEventListener('DOMContentLoaded', function() {
      const aiToggle = document.getElementById('aiToggle');
      const aiChatWindow = document.getElementById('aiChatWindow');
      const chatInput = document.getElementById('chatInput');
      const sendBtn = document.getElementById('sendBtn');
      const chatMessages = document.getElementById('chatMessages');
      const chatClose = document.querySelector('.chat-close');

      // 点击机器人图标显示对话框
      aiToggle.addEventListener('click', function() {
        aiChatWindow.style.display = 'block';
      });

      // 点击关闭按钮隐藏对话框
      chatClose.addEventListener('click', function() {
        aiChatWindow.style.display = 'none';
      });

      // 发送消息功能
      sendBtn.addEventListener('click', sendMessage);
      chatInput.addEventListener('keypress', function(e) {
        if (e.key === 'Enter') {
          sendMessage();
        }
      });

      // 替换为您的API密钥（注意：前端暴露密钥有风险，正式环境建议使用后端中转）
      const DEEPSEEK_API_KEY = 'sk-f58d3884b08843b4ae70a406a465304a';
      const MODEL_VERSION = 'deepseek-chat'; // 使用免费版本

      async function sendMessage() {
        const message = chatInput.value.trim();
        if (!message) return;

        // 添加用户消息
        const userMsg = document.createElement('div');
        userMsg.className = 'message user';
        userMsg.textContent = message;
        chatMessages.appendChild(userMsg);
        chatInput.value = '';

        try {
          // 显示加载状态
          const loadingMsg = document.createElement('div');
          loadingMsg.className = 'message bot';
          loadingMsg.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 思考中...';
          chatMessages.appendChild(loadingMsg);

          // 调用DeepSeek API
          const response = await fetch('https://api.deepseek.com/v1/chat/completions', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
              'Authorization': `Bearer ${DEEPSEEK_API_KEY}`
            },
            body: JSON.stringify({
              model: MODEL_VERSION,
              messages: [{
                role: "user",
                content: `你是一个专业的茶文化助手，请用中文回答以下问题：
                网站功能导航：
                线上预定（茶区预定，茶叶购买，茶具文创）
                特色服务（个性化定制旅行，茶树领养）
                ${message}
                回答要求：
                1. 保持口语化，不超过150字
                2. 适当使用emoji增加亲和力
                3. 如果涉及专业术语请用括号标注英文`
              }],
              temperature: 0.7
            })
          });

          const data = await response.json();
          
          // 移除加载提示
          chatMessages.removeChild(loadingMsg);

          // 添加AI回复
          const botMsg = document.createElement('div');
          botMsg.className = 'message bot';
          botMsg.innerHTML = data.choices[0].message.content.replace(/\n/g, '<br>');
          chatMessages.appendChild(botMsg);

        } catch (error) {
          console.error('API请求失败:', error);
          const errorMsg = document.createElement('div');
          errorMsg.className = 'message bot error';
          errorMsg.textContent = '抱歉，暂时无法回答，请稍后再试。';
          chatMessages.appendChild(errorMsg);
        }

        // 滚动到底部
        chatMessages.scrollTop = chatMessages.scrollHeight;
      }
    });

    // 检查用户登录状态，更新导航栏上的显示
    const currentUser = JSON.parse(localStorage.getItem('currentUser'));
    const headerLoginBtn = document.getElementById('headerLoginBtn');
    const headerLogoutBtn = document.getElementById('headerLogoutBtn');
    
    if (currentUser) {
      // 更新header中的登录/退出按钮
      headerLoginBtn.style.display = 'none';
      headerLogoutBtn.style.display = 'inline-block';
    }
    
    // 退出登录功能
    headerLogoutBtn.addEventListener('click', function(e) {
      e.preventDefault();
      localStorage.removeItem('currentUser');
      alert('您已成功退出登录');
      window.location.reload();
    });
  </script>
</body>
</html>